<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--使用veu开发前端-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

<!-- 使用bootStrap引入文件时需要注意顺序，最好按照以下顺序引入 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<div id="aa" style="position: fixed; left: 520px">
		拍品名字：<input v-model='name' type="text">
		<p></p>
		拍品数量：<input v-model='num' type="number">
		<p></p>
		起拍价格：<input v-model='starting_price' type="text"><br>
		<p></p>
		加价幅度：<input v-model='increment' type="text">
		<p></p>
		拍卖地点：<input v-model='auction_site' type="text">
		<p></p>
		保&nbsp;&nbsp;证&nbsp;&nbsp;金：<input v-model='deposit' type="text"><br>
		<p></p>
		拍品分类 ：<select v-model='oneKinds' @change="getTwo()">
			<option v-for="kind in kinds">{{kind.name}}</option>
		</select> <select v-model='twoKindss' @click="getId()">
			<option v-for="twoKind in twoKinds">{{twoKind.name}}</option>
		</select><br> 
		
		拍品描述：<br>
		<textarea v-model='details' rows="" cols=""></textarea>

		上传商品图片： <input v-model='picture' class="filePrew" type="file" @change="addpht()"
			ref="img">
		<!-- change监听表单完成文件选择  ref为了在js里找到DOM元素 -->
		<img :src="picSrc" style="width: 150px; height: 150px;"><br>
		<button class="btn btn-success" @click="uploadProduct()">提交</button>

	</div>
	<script type="text/javascript">
      new Vue({
    	  el:'#aa',
    	  data:{
    		  name:'',       
    		  num:'',        //数量
    		  starting_price:'',   //起拍价
    		  picSrc:'',     //图片地址
    		  picture:'',
    		  oneKinds:'',    //一级分类
    		  twoKindss:'',
    		  auction_site:'',
    		  ct_id:'',
    		  increment:'',    //加价幅度
    		  deposit:'',      //保证金
    		  details:'',      //商品详情
    		  kinds:[],  //一级分类数组
    		  twoKinds:[], //二级分类数组
    		  twoKind:[] //临时数组
      
    	  },
     	  methods:{
    		  getTwo:function(){
    			  //alert(this.oneKindss.co_id);
    			  var arr = [];
    			  //alert(this.oneKinds);
    			 this.twoKinds = this.twoKind;
    			  var k =0;
    			  for(var j=0; j<this.kinds.length; j++){
    				  for(var i=0; i<this.twoKinds.length; i++){
    					  //alert(this.kinds[j].name);
        				if(this.kinds[j].co_id == this.twoKinds[i].co_id && this.kinds[j].name == this.oneKinds){
        					  //alert(this.twoKinds.name);
        					  arr[k] = this.twoKinds[i]
        					  k++;
        					  //alert(k);
        				  } 
        			  }  				  
    			  }
    			  this.twoKinds = arr;
    			  console.info(arr);
    			
    		  },
    		  getId:function(){
    			  for(var i=0; i<this.twoKinds.length;i++){
    				  if(this.twoKindss == this.twoKinds[i].name){
    					  this.ct_id = this.twoKinds[i].ct_id;
    					  return;
    				  }
    			  }
    			  
    		  },
    		  addpht:function(){
                  var that=this
                  //注意这里要使用that保存this，不然下方调用f.onload的时候会出现问题
                  console.log(this.$refs.img.files)
                  var f = new FileReader()
                  f.readAsDataURL(this.$refs.img.files[0])
                  f.onload=function(){
                      that.picSrc=f.result
                  }
              },
              uploadProduct:function(){
            	  //创建一个容器，把从网页得到的数据存到这个容器里,通过键值对的方式，提交给后台
            	  var param = new URLSearchParams();
            	  param.append("name",this.name);
            	  param.append("num",this.num);
            	  param.append("picture",this.picture);
            	  param.append("ct_id",this.ct_id);
            	  param.append("bid_increment",this.increment);
            	  param.append("deposit",this.deposit);
            	  param.append("details",this.details);
            	  param.append("starting_price",this.starting_price);
            	  param.append("auction_site",this.auction_site);
            	  axios.post('product/uploadProduct',param).then(res =>{
            		  console.info(res);
            		  
            	  })
              }
    	  },
    	  mounted(){//当页面加载完毕时，发送请求,获取一级菜单
    		  axios.get('product/getOneCategory').then(res =>{
    			  //alert("sfsdf");
    			  console.info(res);
    			  this.kinds = res.data;
    		  });	
    		   axios.get('product/getTwoCategory').then(res =>{
    			  //alert("two");
    			  console.info(res);
    			  this.twoKinds = res.data;
    			  this.twoKind = res.data;
    			  
    		  })
    	  }
   
      });
  </script>
  
  
  <html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

</body>
</html>